<template>
	<div>
		<div class="nav-list-component" v-for="(item,index) in listCompData" :key='index' v-if="index < contentNum">
			<router-link :to="{'name':'navListIndex'}">
				<i :style="{'backgroundImage':'url('+item.urlImg+')', 'backgroundRepeat':'no-repeat','backgroundSize':'cover'}"></i>
				<span>{{item.content}}</span>
			</router-link>
		</div>
	</div>
</template>

<script>
  export default {
    data () {
      return {
      }
    },
    props: ['listCompData','contentNum']
  }
</script>

<style scoped>
	.nav-list-component {
		margin: 25px 14px 0;
		width: 136px;
		height: 65px;
		float: left;
		background: #FFFFFF;
		border: 1px solid #EAEDF2;
		box-shadow: 0 8px 20px 0 rgba(224,224,224,0.50);
		border-radius: 3px;
	}
	.nav-list-component a {
		display: block;
		width: 136px;
		height: 65px;
		text-decoration: none;
	}
	.nav-list-component i {
		display: inline-block;
		margin-top: 24px;
		margin-left: 26px;
		width: 17px;
		height: 17px;
		background: #008000;
	}
	.nav-list-component span {
		display: inline-block;
		transform: translateY(-4px);
		margin-left: 5px;
		font-size: 14px;
		color: #666666;
	}
</style>